<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .form-panel {
        padding: 40px 40px 10px 10px;
    }
</style>
<div class="form-panel">
    <form class="layui-form" action="" lay-filter="user-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="userEdit">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="btn-cancel">取消</button>
            </div>
        </div>
        <input type="hidden" id="userid" name="userid" value="${param.userid}" />
    </form>
</div>
<script>
    layui.use(['form','table'], function() {
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;

        var userid = $("#userid").val();
        if (userid!="") {   //编辑用户请求
            $.ajax({
                url:"userData",
                data:"userid=" + userid,
                dataType:"json",
                success:function(data) {
                    form.val('user-form', data);
                }
            });
        }

        //监听提交
        form.on('submit(userEdit)', function (data) {
            $.ajax({
                url: "userEdit",
                type: "post",
                data: data.field,
                dataType: "json",
                success: function (data) {
                    table.reload("userTable");
                    layer.closeAll();
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $("#btn-cancel").on("click",function() {
            layer.closeAll();
        });

    });
</script>
